<template>
  <div class="article_list">
    <el-card v-for="(item, index) in list" :key="index" class="article-card">
      <div class="article-item" @click="toArticle(item.id)">
        <div class="article-image">
          <el-image style="max-height: 120px;" :src="item.img ? $cloud + item.img : require('@/assets/img/placeholder.png')">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
              <p>暂无图片</p>
            </div>
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
        <div class="article-item-content">
          <h1 class="article-title">{{ item.title }}</h1>
          <div class="article-description ellipsis">{{ item.description || '看起来好像很有趣的样子噢~' }}</div>
          <div class="article-info">
            <span><i class="el-icon-time"></i>{{ item.createdAt }}</span>
            <span><i class="el-icon-price-tag"></i><span v-for="(o, i) in item.tags" :key="i">{{ o.name }}</span></span>
          </div>
        </div>
      </div>
    </el-card>
    <el-empty v-if="isNull" description="暂无文章"></el-empty>

  </div>
</template>

<script>
export default {
  name: 'ArticleList',
  props: {
    list: Array,
    isNull: false,
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    goto(path) {
      this.$router.push(path)
    },
    toArticle(id) {
      this.goto('/article/' + id)
    },
  },
}
</script>

<style scoped lang="scss">
/*文章*/
.article_list {
  width: 100%;
}

.article-card {
  margin: 24px 0;

  &:hover .article-title {
    color: $blue !important;
  }

  .article-item {
    display: flex;
    align-items: stretch;

    .article-image {
      // flex: 1;
      flex-shrink: 0; // 不缩放
      width: 200px;
      height: auto;
      // background-color: #f5f7fa;
      text-align: center;
      display: block;
      display: flex;
      align-items: center;
      justify-content: center;

      .image-slot {
        display: block;
      }

      // & img {
      //   width: 100%;
      //   height: 100%;
      //   border-radius: 4px;
      // }
    }

    .article-item-content {
      // flex: 2;
      display: flex;
      flex-direction: column;
      align-content: space-around;
      padding-left: 24px;
      color: $light-black;

      .article-title {
        cursor: pointer;
        font-weight: bold;
        font-size: 20px;
        padding-bottom: 12px;
        margin: 0;
        flex: 1;
      }

      .article-description {
        flex: 1;
        font-size: 15px;
        color: $light-gray;
        margin: 12px 0 24px;
      }

      .article-info {
        flex: 1;
        font-size: 14px;
        color: $light-gray;

        span {
          margin-right: 20px;

          i {
            padding-right: 8px;
          }
        }
      }
    }
  }
}

// 分页
.el-pagination {
  margin: 48px 0;
  text-align: center;
}

/* ---------------------- 移动端 -------------------------- */
@media screen and (max-width: 540px) {
  .article-image {
    width: 120px !important;
  }
}
</style>
